<template>
	<view class="love-all">
		<view class="love-top">
			<button size="mini" class="set-me" @click="openSetMe">设置自己</button>
			<uni-popup ref="setMe" type="bottom" background-color="#fff" border-radius="10px 10px 0 0">
				<view style="text-align: center;margin-top: 2vh;margin-bottom: 2vh;">设置自己</view>
				
				<button class="save" @click="saveMe">保存</button>
			</uni-popup>
			<button size="mini" class="filtration" @click="openFiltration">筛选</button>
			<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0">
				<view style="text-align: center;margin-top: 2vh;margin-bottom: 2vh;">筛选条件</view>
				<view class="filtration-one"><!--年龄-->
					<view class="text">年龄</view>
					<input class="start-age" type="number" 
					v-model="filtration.startAge" :maxlength="2"/>
					<view class="to">至</view>
					<input class="end-age" type="number"
					 v-model="filtration.endAge" :maxlength="2"/>
				</view>
				<button class="save" @click="saveFiltration">保存</button>
			</uni-popup>
		</view>
		<view class="love-body">
			<image class="bg" src="../../static/love-bg.png"/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filtration:null
			}
		},
		onShow(){
			uni.getStorage({
				key:"filtration",
				success: (res) => {
					this.filtration=res.data
				},
				fail: () => {
					this.filtration={
						startAge:0,
						endAge:99
					}
				}
			})
		},
		methods: {
			openSetMe(){
				this.$refs.setMe.open('bottom')
			},
			openFiltration(){
			    this.$refs.popup.open('bottom')
			},
			saveFiltration(){//保存信息
			    if(parseInt(this.filtration.startAge) > parseInt(this.filtration.endAge)){
					uni.showToast({
						title:"年龄区间错误",
						icon:'error'
					})
					return
				}
				uni.setStorage({
					key:"filtration",
					data:this.filtration,
					success: () => {
						uni.showToast({
							title:"保存成功",
							position:'top'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.love-all{
		width: 100vw;
		.love-top{
			position: relative;
			width: 100vw;
			height: 10vh;
			min-height: 2rem;
			.set-me{
				position: absolute;
				width: 6rem;
				left: 1rem;
				top: 0.5rem;
				border-radius: 15px;
			}
			.filtration{
				position: absolute;
				width: 6rem;
				right: 1rem;
				top: 0.5rem;
				border-radius: 15px;
			}
			.filtration-one{
				position: relative;
				width: 100vw;
				height: 10vh;
				.text{
					position: absolute;
					width: 10vw;
					left: 10vw;
					top: 2vh;
				}
				.start-age{
					position: absolute;
					left: 30vw;
					top: 2vh;
					width: 3rem;
					border: 1px solid gray;
				}
				.to{
					position: absolute;
					left: calc(35vw + 3rem);
					top: 2vh;
				}
				.end-age{
					position: absolute;
					left: 60vw;
					top: 2vh;
					width: 3rem;
					border: 1px solid gray;
				}
			}
		    .save{
				width: 80vw;
				margin-left: 10vw;
				margin-bottom: 2vh;
				background-color: blue;
				color: white;
			}
			.save:active{
				opacity: 0.5;
			}
		}
	    .love-body{
			width: 100vw;
			height: 50vh;
			.bg{
				width: 100vw;
			}
		}
	}
</style>